<template lang="pug">
  .tools-bar-f
    ul.icon-list
      li.icon-item(
        v-for='(item, index) in menu',
        :key='index',
        @click='handleToolbar(item, index)')
        .icon-inner
          img(:src='"/static/images/icon/" + (curIndex == index ? item.active : item.normal) + ".png"')
</template>

<script>
import {
  hasMiniMap5,
  handleToolsBar,
  handleSystemMenu,
  handleCustomMenu
} from '@/utils/menu'
import {
  isPc,
  isPlainObject
} from '@/utils'
import { mapGetters } from 'vuex'
import * as krpano from '@/utils/krpano'

export default {
  data() {
    return {
      menu: [],
      curScene: null,
      curIndex: -1
    }
  },
  mounted() {
    setTimeout(() => {
      this.curScene = this.$krp.getSceneId()
      this._hasMiniMap()
    }, 1000)

    this.$vgo.on('hasminimap', () => {
      this._hasMiniMap()
    })
  },
  methods: {
    filterToolsIcon() {
      let toolsList = [
        // { type_id: 'full', name: 'full', normal: 'full', active: 'full_active', item: null }
      ]

      if (krpano.visibleClear()) {
        toolsList.push({ type_id: 'clean', name: 'clean', normal: 'clean', active: 'clean_active', item: null })
      }

      if (krpano.visibleBarrage()) {
        toolsList.push({ type_id: 'barrage', name: 'barrage', normal: 'barrage', active: 'barrage_active', item: null })
      }

      if (krpano.isSceneRotateActive()) {
        toolsList.push({ type_id: 'rotate', name: 'rotate', normal: 'rotate', active: 'rotate_active', item: null })
      }

      if (krpano.isGyroActive() && !isPc()) {
        toolsList.push({ type_id: 'gyro', name: 'gyro', normal: 'gyro', active: 'gyro_active', item: null })
      }

      if (krpano.visibleVr()) {
        toolsList.push({ type_id: 'vr', name: 'vr', normal: 'vr', active: 'vr', item: null })
      }

      const topMenu = this.getTopMenu

      if (topMenu.length > 0) {
        topMenu.forEach(item => {
          switch (item.type_id) {
            case 8:
              toolsList.push({ type_id: '8', name: 'voice', normal: 'voice', active: 'voice_active', item })
              break;
          }
        })
      }
      if (this.navGuideData.length > 0) {
        toolsList.push({ title: 'navguide', name: 'location', normal: 'location', active: 'location_active', item: 'toolmenu' })
      }

      if (this.panoInfo.bgmusicurl) {
        toolsList.push({ type_id: 'bgmusic', name: 'music', normal: 'music', active: 'music_active', item: null })
      }

      if (this.goodsCart.list.length > 0) {
        toolsList.push({ title: 'cart', name: 'cart', normal: 'cart', active: 'cart', item: 'cart' })
      }

      if (this.panoWxCardList && this.panoWxCardList.length) {
        toolsList.push({ title: 'card', name: 'card', normal: 'card', active: 'card', item: 'wxcard' })
      }

      // 多屏互动
      if (window.$globalconfig.MODULES.IS_SCREENOPEN && krpano.visibleMultiscreen()) {
        toolsList.push({
          title: 'interaction',
          name: 'interaction',
          normal: "interaction",
          active: "interaction",
          item: 'interaction',
        })
      }

      if(this.$_router.currentRoute.query.room_id) {
        for (var i = 0, length = toolsList.length; i < length; i++) {
          if (toolsList[i].name == 'interaction') {
            this.handleToolbar(toolsList[i], i)
          }
        } 
      }
      return toolsList
    },
    _hasMiniMap() {
      let menu = this.filterToolsIcon()
      if (hasMiniMap5()) {
        let obj = { title: 'minimap', name: 'map', normal: 'map', active: 'map', item: 'toolmenu' }
        if ($globalconfig.Template6MiniMapIcon && this.themeId == 7) {
         obj.active = obj.normal = 'mapTpl6'
        }
        menu.push(obj)
      }
      this.menu = menu
    },
    // 这里混合了各种菜单，已经奔溃
    handleToolbar(obj, index) {
      console.log('---------obj')
      console.log(obj)
      console.log(index)
      console.log(isPlainObject(obj.item))
      if (index == this.curIndex) {
        this.curIndex = -1
      } else {
        this.curIndex = index
      }
      // 自定义菜单
      if (isPlainObject(obj.item)) {
        handleCustomMenu(obj.item)
      } else {
        if (obj.item) {
          // pandent
          if (obj.item === 'cart') {
            this.showCart()
          } else if (obj.item === 'wxcard') {
            this.showWxCard()
          } else { // toolsbar menu
            handleToolsBar(obj)
          }
        } else { // 系统菜单
          handleSystemMenu(obj)
        }
      }
    },
    showWxCard() {
      if (this.$AUTH.checkLogin()) {
        this.$router.push(`/panoview/${this.$route.params.panoId}/cardlist`)
      }
    },
    showCart() {
      this.$vgo.emit('cart:show')
    },
  },
  computed: {
    ...mapGetters([
      'getTopMenu',
      'navGuideData',
      'panoInfo',
      'themeId',
      'cartList',
      'goodsCart',
      'panoWxCardList',
      'miniMapData'
    ])
  }
}
</script>
<style lang="stylus" scoped>
.theme-pc-f
  .tools-bar-f
    top: 80px

    .icon-item
      .icon-inner
        $size = 34px
        width: $size /* 30/16 */
        height: $size /* 30/16 */
        line-height: $size

.theme-app-f
  .tools-bar-f
    top: 20px

    .icon-item
      .icon-inner
        $size = 30px
        width: $size /* 30/16 */
        height: $size /* 30/16 */
        line-height: $size

.tools-bar-f
  position: absolute
  right: 0
  z-index: 99

  .icon-item
    padding: 5px

    .icon-inner
      border-radius: 50%
      background: url()
      text-align: center

      img
        width: 100%
</style>
